<template>
  <div class="data-layout">
    <router-view />
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: 'data-layout'
})
</script>

<style lang="scss">
.data-layout {
  height: 100%;
  width: 100%;
  padding-left: 3rem;
  padding-right: 1rem;
  box-sizing: border-box;

  .scrollbar {
    height: 100%;
  }

  .edit-layout {
    height: 100%;
    display: flex;
    flex-direction: column;

    .edit-layout-button-row {
      text-align: right;
      padding: 1em 0;
      flex: 0;
    }

    .edit-layout-content-row {
      flex: 1;
      height: 0;

      .cg-form {
        padding-right: 20px;
      }
    }
  }

  .manager-layout {
    height: 100%;
    display: flex;
    flex-direction: column;

    .cg-filter-row {
      flex: 0;
    }

    .cg-table {
      flex: 1;
    }

    .operation-cell {
      .cg-button + .cg-button {
        margin-left: 10px;
      }
    }
  }
}
</style>
